<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../css/home/home.css" type="text/css" rel="stylesheet" />
    <link href="../../css/folders/folder.css" type="text/css" rel="stylesheet" />
    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/home/home.js"></script>
    <script src="../../js/folders/folder.js"></script>
    <script>
        function edit(element){
            var oldhtml = element.innerHTML;    //获得元素之前的内容
            var newobj = document.createElement('input');   //创建一个input元素
            newobj.type = 'text';   //为newobj元素添加类型
            newobj.value=oldhtml;
            newobj.style.width=100+"px";
            element.innerHTML = '';　　 //设置元素内容为空
            element.appendChild(newobj);    //添加子元素
            newobj.select();    //文件名全选
            newobj.focus(); //获得焦点
            //编辑时按下回车键
            document.onkeydown = function (e) {
                if (!e) e = window.event;
                if ((e.keyCode || e.which) == 13) {
                    element.innerHTML = this.value ? this.value : oldhtml;
                    newobj.blur();　 //使文本框失去焦点
                }
            }
            //设置newobj失去焦点时的事件
            newobj.onblur = function(){
                //下面应该判断是否做了修改并使用ajax代码请求服务端将id与修改后的数据提交
                //    alert(element.id);
                //当触发时判断newobj的值是否为空，为空则不修改，并返回oldhtml
                element.innerHTML = this.value ? this.value : oldhtml;
            }

        }/*双击文件名重命名*/
    </script><!--双击重命名文件夹-->
</head>
<body>
<div class="box fileDetail">
    <div class="box_function box2">
        <div class="btn_upload function">
            <span class="input-file input-fileup" href="javascript:;">
                <img />上传
                <input size="100" type="file" name="file" multiple="multiple" id="file">
            </span>
        </div>
        <div class="btn_download function">
            <span class="txt_function"><img />下载</span>
        </div>
        <div class="btn_delete function">
            <span class="txt_function"><img />删除</span>
        </div>
        <div class="searchBar searchFile">
            <form class="search">
                <input type="text" placeholder="请输入您要搜索的内容...">
                <button type="submit"></button>
            </form>
        </div>
    </div><!--操作栏-->
    <div class="box_position box2">
        <span class="posNow">项目管理</span>
        <img src="../../images/folders/advance.png" />
        <span></span>
        <img src="../../images/folders/advance.png" />
        <span></span>
        <img src="../../images/folders/advance.png" />
        <span></span>
    </div><!--当前位置-->
    <div class="firstFile box2 now">
        <div class="box_file">
            <img src="../../images/folders/file.png" >
            <span ondblclick="edit(this)">软件分析阶段</span>
        </div>
        <div class="box_file">
            <img src="../../images/folders/file.png" >
            <span ondblclick="edit(this)">软件设计阶段</span>
        </div>
        <div class="box_file">
            <img src="../../images/folders/file.png" >
            <span ondblclick="edit(this)">编码和测试阶段</span>
        </div>
    </div><!--一级文件区-->
    <div class="secondFile box2">
        <div class="second secondNow">
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">可行性分析</span>
            </div>
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">需求分析</span>
            </div>
        </div>
        <div class="second">
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">概要设计</span>
            </div>
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">详细设计</span>
            </div>
        </div>
        <div class="second">
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">编码</span>
            </div>
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">测试</span>
            </div>
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">运行与交付</span>
            </div>
            <div class="box_file">
                <img src="../../images/folders/file.png" >
                <span ondblclick="edit(this)">维护</span>
            </div>
        </div>
    </div><!--二级文件区-->
    <div class="thirdFile box2">
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档0</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档1</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档2</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格3</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档4</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档5</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档6</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格</span>
                </div>
            </div>
        </div>
        <div class="third">
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/word.png" >
                    <span ondblclick="edit(this)">新建文档7</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/txt.png" >
                    <span ondblclick="edit(this)">新建文本文档</span>
                </div>
            </div>
            <div class="box_file">
                <img class="imgSelect" src="../../images/folders/select.png" />
                <div>
                    <img src="../../images/folders/excel.png" >
                    <span ondblclick="edit(this)">新建表格</span>
                </div>
            </div>
        </div>
    </div><!--三级文件区-->
    <div class="infoDetail">
        <form class="infoForm">
            <div class="labelInfo">
                <div class="edit"><button>编辑</button></div>
            </div>
            <div class="labelInfo">
                <label class="labelFirst">文件编号:</label>
                <input type="text" disabled />
            </div>
            <div class="labelInfo">
                <label class="labelFirst">文件名:</label>
                <input type="text" disabled />
            </div>
            <div class="labelInfo">
                <label class="labelFirst">版本号:</label>
                <input type="text" disabled />
                <div class="hVersion"><button><a href="#">历史版本</a></button></div>
            </div>
            <div class="labelInfo">
                <label class="labelFirst">修改时间:</label>
                <input type="datetime-local" value="2018-01-27T13:59:59" disabled />
            </div>
            <div class="labelInfo">
                <label class="labelFirst">修改人:</label>
                <input type="text" disabled />
            </div>
            <div class="labelInfo">
                <label class="labelFirst">修改摘要:</label>
                <input type="text" disabled />
            </div>
        </form>
    </div><!--文件详细信息-->
</div><!--项目文件区-->
<div class="version">
    <div class="title">
        <p>历史版本</p>
        <div class="return">
            <button>返 回</button>
        </div>
    </div>
    <div class="box">
        <table class="history">
            <tr class="trNow">
                <td>文档号</td>
                <td>版本号</td>
                <td>修改时间</td>
                <td>修改人</td>
                <td>修改摘要</td>
                <td>操作</td>
            </tr>
            <tr>
                <td>001</td>
                <td>2018-01-02</td>
                <td>2018-01-02</td>
                <td>小李</td>
                <td>添加查询功能</td>
                <td>
                    <div><button>下 载</button></div>
                    <div><button>删 除</button></div>
                </td>
            </tr>
            <tr>
                <td>002</td>
                <td>2018-01-04</td>
                <td>2018-01-04</td>
                <td>小白</td>
                <td>添加修改功能</td>
                <td>
                    <div><button>下 载</button></div>
                    <div><button>删 除</button></div>
                </td>
            </tr>
            <tr>
                <td>003</td>
                <td>2018-01-08</td>
                <td>2018-01-08</td>
                <td>小林</td>
                <td>添加删除功能</td>
                <td>
                    <div><button>下 载</button></div>
                    <div><button>删 除</button></div>
                </td>
            </tr>
        </table>
        <div class="fStyle">
            <p>共<span class="pageAll">1</span>条</p>
            <div class="select">
                <select name="number" class="number">
                    <option value="3" selected>&nbsp;&nbsp;3</option>
                    <option value="5">&nbsp;&nbsp;5</option>
                    <option value="10">&nbsp;&nbsp;10</option>
                    <option value="20">&nbsp;&nbsp;20</option>
                </select>
            </div>
            <div class="addStyle"><input type="button" class="first" value="首页" /></div>
            <ul class="pageTurn">
                <li class="prevBtn"><img src="../../images/prev.jpg" /></li>
                <li><span class="pageNow">1</span></li>
                <li class="nextBtn"><img src="../../images/next.jpg" /></li>
            </ul>
            <div class="addStyle"><input type="button" class="last" value="尾页" /></div>
            <input type="text" class="jumpTo" value="输入页码" />
            <div class="addStyle"><input type="submit" class="go" value="跳转" /></div>
        </div>
    </div>
</div><!--历史版本-->
</body>
</html>